/*!
 * @author Isis (igraziatto) Graziatto <isis.g@vanillaforums.com>
 * @copyright 2009-2018 Vanilla Forums Inc.
 * @license GPL-2.0-only
 */

/* -------------------------------------------------------------- *\
    Styles
\* -------------------------------------------------------------- */

.DataList,
.MessageList,
.PageTitle {
    .Options {
        display: flex;
        height: 26px;
    }
}

.DataList,
.MessageList {
    @if ($staticVariables) {
        margin: 0 0 $utility-baseUnitTriple;
        .Item {
            @include listItem;
        }
    }

    @if ($component-item_spacing == 0 and $component_lateralBorder == true) {
        .Item.CategoryHeading + .Item:not(.CategoryHeading) {
            border-top-left-radius: $component_borderRadius;
            border-top-right-radius: $component_borderRadius;
        }
    }

    .Item.CategoryHeading {
        @if $staticVariables {
            padding: 0 !important;
            background: transparent;
            box-shadow: none;
            margin-bottom: $component-vertical_padding;
            font-size: $global-title_fontSize;
            border-width: 0;
        }

        @if ($component_lateralBorder == true and $component-item_spacing != 0) {
            border-left: $component_border;
            border-right: $component_border;
        } @else {
            border-left-width: 0;
            border-right-width: 0;
        }

        @if $component-item_spacing != 0 {
            background: $component_bg;
            padding: $component-base_padding !important;
            box-shadow: $component_boxShadow;
            border-radius: $component_borderRadius;
            margin-bottom: $component-item_spacing;
            border-top: $component_border;
            border-bottom: $component_border;
        }

        .Options {
            display: none;
        }

        @include maxWidth {
            font-size: $global-subTitle_fontSize;
        }
    }

    .Item ~ .CategoryHeading {
        margin-top: $component-vertical_padding;

        @if $component-item_spacing == 0 {
            // simulate bottom border for previous element
            &::before {
                content: "";
                height: $component_borderRadius;
                border-bottom: $component_border;

                @if $component_boxShadow != none {
                    box-shadow: $component_boxShadow, 0 #{$component_borderWidth + 2px} 0 $content_bg;
                } @else {
                    box-shadow: 0 #{$component_borderWidth + 2px} 0 $content_bg;
                }

                @if $component_lateralBorder == true {
                    border-left: $component_border;
                    border-right: $component_border;
                    border-bottom-left-radius: $component_borderRadius;
                    border-bottom-right-radius: $component_borderRadius;
                }

                background: transparent;
                position: absolute;
                width: 100%;
                left: 0;
                @if ($staticVariables) {
                    top: calc((#{$component-vertical_padding} + #{$component_borderRadius}) * -1);
                }
            }
        }
    }

    .Item .Title,
    .Item.Read .Title,
    .Item h3 {
        font-size: $component-title_fontSize;
        font-weight: $component-title_fontWeight;
        line-height: #{$theme-photo_size * 0.5};
        color: $component-title_color;
        display: block;
        margin-bottom: $utility-baseUnit;

        @if ($staticVariables) {
            &:focus,
            &:hover {
                color: $component-title-hover_color;
            }
        }

        @if ($staticVariables) {
            a {
                font-size: inherit;
                font-weight: inherit;
                display: inline;
                color: inherit;

                &:focus,
                &:hover {
                    color: inherit;
                }
            }
        }
    }

    .Excerpt,
    .CategoryDescription {
        display: block;
        width: 100%;
        font-size: $component-base_fontSize;
        font-weight: $component-base_fontWeight;
        line-height: $component-base_lineHeight;
        color: $component-base_color;
        margin: 0 0 $utility-baseUnit;
    }

    .Excerpt:empty,
    .CategoryDescription:empty {
        display: none;
    }

    @if $staticVariables {
        .ItemContent.Discussion .Excerpt {
            margin-top: $utility-baseUnit;
        }
    }

    .Bookmark::before,
    .OptionsMenu .Arrow::before {
        font-size: $icon-default_size;
        line-height: $icon-default_size;
    }

    .OptionsMenu .Arrow::before {
        font-size: #{$icon-default_size - 2px};
        margin-top: -1px;
    }

    .LastCommentBy,
    .MostRecent,
    .MostRecentBy {
        > * {
            white-space: normal;
        }
        a {
            display: inline;
        }
    }

    .MostRecentBy {
        display: inherit;
    }

    @if $staticVariables {
        .MostRecentBy,
        .LatestPostTitle {
            @include ellipsis;
            display: inline-block;
        }
    }

    .MItem.Category {
        display: inline;
        a {
            white-space: normal;
            @if $staticVariables {
                @include ellipsis;
                display: inherit;
            }
        }
    }

    @if ($staticVariables) {
        .Meta,
        .AuthorInfo {
            font-size: $component-meta_fontSize;
            font-weight: $component-meta_fontWeight;
            color: $component-meta_color;
        }

        .Meta {
            margin-left: -$utility-baseUnit;
            margin-right: -$utility-baseUnit;
        }

        .Meta,
        .AuthorWrap {
            @include maxWidth {
                line-height: $component-meta_lineHeight;
            }
        }

        .Author .Username,
        .MItem,
        .MItem.Category,
        .ChildCategories {
            font-size: inherit;
            font-weight: inherit;
            color: inherit;
            display: inline-block;

            a {
                font-size: inherit;
                font-weight: inherit;
                line-height: inherit;
                @if ($staticVariables) {
                    color: $component-meta-link_color;

                    &:focus,
                    &:hover {
                        text-decoration: $theme-link-hover_textDecoration;
                        color: $component-meta-link-hover_color;
                    }
                }
            }
        }
    }

    @if ($staticVariables) {
        .Tag,
        .MItem {
            margin: {
                left: $utility-baseUnit;
                right: $utility-baseUnit;
            }
        }
    }

    .MItem.Hidden {
        display: none;
    }

    .Tag:not([class*="Status-Tag"]),
    .HasNew {
        margin-bottom: $utility-baseUnitHalf;
    }

    .MItem.DiscussionAuthor {
        display: none;
    }

    .MItem.RSS {
        display: none;
    }

    .ChildCategories {
        display: flex;
        flex-wrap: wrap;
        border-top: 0;
        margin-bottom: -$utility-baseUnitHalf;

        b {
            margin-right: $utility-baseUnitHalf;
            margin-bottom: $utility-baseUnitHalf;
        }

        a {
            color: $component-meta-link_color;
            font-weight: inherit;
            font-size: inherit;
            line-height: inherit;
            margin-bottom: $utility-baseUnitHalf;

            &:focus,
            &:hover,
            &:active {
                color: $component-meta-link-hover_color;
            }
        }

        .Comma {
            margin-right: $utility-baseUnitHalf;
        }
    }

    a.Delete {
        @include CloseButton;
    }

    .PhotoWrap {
        margin: 0 $utility-baseUnitDouble 0 0;
        @include photoWrap;
    }

    .IndexPhoto {
        margin-right: 0;
    }

    @if $staticVariables {
        .MItem .userCardWrapper-link {
            margin-left: $utility-baseUnit;
        }
    }

    // overwrite ideation plugin styles
    .ItemIdea.ItemIdea.ItemIdea {
        @if ($staticVariables) {
            .PhotoWrap.IndexPhoto,
            .idea-counter-module .idea-counter-box {
                margin: 0 $utility-baseUnitDouble 0 0;
                width: $theme-photo_size;
                height: $theme-photo_size;
            }
        }

        @if ($staticVariables) {
            .Meta {
                .ViewCount {
                    margin-left: 0;
                }
            }
        }
    }

    //Warnings and Notes
    .Item-Col .Options {
        visibility: visible;

        .OptionsLink {
            @if ($staticVariables) {
                @include Button(
                    $button-basic_bg,
                    $button-basic_fg,
                    $button-basic_border,
                    $button-basic-hover_bg,
                    $button-basic-hover_fg,
                    $button-basic-hover_border
                );
            }
            margin-left: $utility-baseUnitHalf;
        }

        .Bullet {
            display: none;
        }
    }

    .NoteType {
        @include font-heading;
    }

    .CategoryPhoto {
        height: inherit;
    }

    @if $staticVariables {
        .MItem.MItem-Resolved {
            display: inline-block;
            width: 13px;
            height: 14px;
            padding: 0;
            margin-bottom: 0;
            line-height: inherit;
            font-size: inherit;
            vertical-align: middle;
        }
    }
    .Hero {
        padding: 0;
    }

    mark {
        background-color: rgba($global-color_warning, 0.5);
    }

    .Reactions {
        margin: 0 -#{$utility-baseUnitHalf};

        .Bullet {
            display: none;
        }

        .ToggleFlyout {
            display: inline-block;
        }

        .ReactButton {
            margin: $utility-baseUnitHalf $utility-baseUnitHalf 0;

            @include maxWidth {
                line-height: 2.5em;
            }
        }

        .ReactButton-Flag {
            margin-left: 0;
        }
    }
}

.DataList:not(.CategoryList),
.PageTitle + .ItemDiscussion {
    @if $component_lateralBorder == false {
        border-top-width: 0;
    }

    @if $component-item_spacing == 0 {
        border-radius: $component_borderRadius;
        box-shadow: $component_boxShadow;
    }
}

@if $staticVariables {
    .DataList.CategoryList {
        @if $component-item_spacing == 0 {
            .Item:not(.CategoryHeading) {
                box-shadow: $component_boxShadow;
            }
        }

        .Item[class*="Depth"] {
            padding-left: $component-horizontal_padding !important;
        }
    }
}

.DataList.Discussions {
    .Item {
        .Title {
            display: block;
        }

        .Options .ToggleFlyout {
            order: 2;
        }
    }

    @if $staticVariables {
        .ItemDiscussion-withPhoto {
            .Discussion.ItemContent {
                padding-left: $theme-photo_size + $utility-baseUnitDouble;
            }

            .userCardWrapper-photo {
                left: $utility-baseUnitDouble;
                position: absolute;
                top: $utility-baseUnitTriple;
            }

            &.ItemIdea {
                .idea-counter-module {
                    position: absolute;
                    left: $theme-photo_size + $utility-baseUnitTriple;
                    top: $utility-baseUnitTriple;
                }

                .Discussion.ItemContent {
                    padding-left: $theme-photo_size + $utility-baseUnitTriple + $theme-photo_size;
                }
            }
        }
    }
}

.MessageList {
    .PageTitle,
    .ItemComment {
        .Options {
            .ToggleFlyout {
                order: 2;
            }
        }
    }

    .PageTitle {
        margin-bottom: $global-block_margin;

        h1 {
            font-size: $global-title_fontSize;
            line-height: $global-condensed_lineHeight;

            @include maxWidth {
                font-size: $global-subTitle_fontSize;
            }
        }

        .Options .Bookmark {
            order: 2;
        }
    }

    .ItemComment.ItemComment,
    .ItemDiscussion.ItemDiscussion {
        padding: 0;
    }

    .ItemComment,
    .ItemDiscussion {
        position: relative;

        .Item-Header {
            background: $component-header_bg;
            margin: 0;
            width: 100%;
            @if $staticVariables {
                min-height: $theme-photo_size + ($utility-baseUnitDouble * 2);
            }
            padding: {
                top: $component-vertical_padding;
                bottom: calc(#{$component-vertical_padding} / 2);
                left: $component-horizontal_padding;
                right: $component-horizontal_padding;
            }

            @if $component-item_spacing != 0 {
                border-top-left-radius: $component_borderRadius;
                border-top-right-radius: $component_borderRadius;
            }

            @if $staticVariables {
                .PhotoWrap {
                    margin: 0;
                    position: absolute;
                    top: $component-vertical_padding;
                    left: $component-horizontal_padding;
                }
            }
        }

        .MItem.RoleTracker {
            padding: 0 $utility-baseUnitHalf;

            a {
                @if ($staticVariables) {
                    color: inherit;
                }
                margin: 0;

                &:hover,
                &:focus,
                &:active {
                    text-decoration: none;
                }
            }
        }

        .Meta,
        .AuthorWrap {
            font-size: $component-meta_fontSize;
            line-height: $component-meta_lineHeight;
            display: inline-block;
            @if $staticVariables {
                padding-left: calc(#{$theme-photo_size} + #{$component-horizontal_padding});
            }

            > * {
                display: inline;
                font-size: inherit;
                line-height: inherit;
            }
        }

        @if ($staticVariables) {
            .InlineTags {
                padding-left: 0;

                a {
                    font-size: inherit;
                    color: $component-meta-link_color;

                    &:hover,
                    &:focus,
                    &:active {
                        color: $component-meta-link-hover_color;
                    }
                }
            }
        }

        .Meta {
            width: 100%;

            @include maxWidth {
                margin-top: 0;
            }
        }

        .MItem {
            margin-bottom: 0;

            @include maxWidth {
                margin-bottom: $utility-baseUnitHalf;
            }
        }

        @if $staticVariables {
            .AuthorWrap {
                max-width: calc(100% - 45px);
            }
        }
        .MItem.Category {
            display: none;
        }

        @if ($staticVariables) {
            .MItem.RoleTitle,
            .MItem.Rank {
                @include Tag;
                color: inherit;
            }

            .Username {
                color: $component-meta-link_color;
                font-weight: $component-meta_fontWeight;

                &:hover,
                &:focus {
                    color: $component-meta-link-hover_color;
                }
            }
        }

        .flair {
            display: inline-flex;
            margin: 0 -#{$utility-baseUnitHalf};
            width: calc(100% + (#{$utility-baseUnitHalf} * 2));
        }

        .flair-item {
            display: inline-block;
            margin: 0 $utility-baseUnitHalf;

            img {
                margin: 0;
            }
        }

        .Item-BodyWrap {
            border-bottom-left-radius: $component_borderRadius;
            border-bottom-right-radius: $component_borderRadius;
            padding: {
                top: calc(#{$component-vertical_padding * 0.5});
            }
        }

        .Item-Body > *:empty {
            display: none;
        }

        .Item-Body > * {
            margin: 0;
            margin-top: $utility-baseUnitDouble;
        }
    }

    @if $staticVariables {
        .ItemComment {
            .Options {
                margin-top: $component-vertical_padding;
                margin-right: $component-vertical_padding;
            }
        }
    }
}

.MessageList {
    &.Comments,
    &.AcceptedAnswers {
        .Item:first-child {
            @if $component_lateralBorder == false {
                border-top-width: 0;
            }
        }
    }
}

.Activities,
.Conversations,
.MessageList {
    clear: both;
}

.Activities {
    .ItemContent {
        margin-left: calc(#{$theme-photo_size} + #{$component-horizontal_padding});

        .Title {
            @include maxWidth {
                padding-right: $utility-baseUnitDouble;
            }
        }

        .Author {
            display: block;

            .PhotoWrap {
                @include maxWidth {
                    margin-right: 0;
                }
            }
        }

        .Delete {
            @include maxWidth {
                position: absolute;
            }
        }
    }
    .ActivityComment {
        .PhotoWrap {
            @include photoWrap;
        }
    }
}

.Conversation {
    .Meta {
        margin-left: 0;
        margin-right: 0;
    }
}

.DataList-Search {
    margin-top: $utility-baseUnitTriple;

    h3,
    .Item-Body {
        padding-left: calc(#{$theme-photo_size} + #{$component-horizontal_padding});
    }

    .PhotoWrap {
        position: absolute;
        top: $component-vertical_padding;

        @if $component_lateralBorder == true {
            left: $component-horizontal_padding;
        } @else {
            left: 0;
        }
    }

    .Meta {
        margin-left: 0;
        margin-right: 0;
    }

    @if ($staticVariables) {
        .MItem-Author a {
            font-size: inherit;
            font-weight: inherit;
            line-height: inherit;
            color: $component-meta-link_color;

            &:focus,
            &:hover {
                text-decoration: $theme-link-hover_textDecoration;
                color: $component-meta-link-hover_color;
            }
        }
    }
}

.Group-Content .DataList {
    .ItemContent.Discussion {
        padding-left: 0;
    }

    .Options {
        position: absolute;
        top: $component-vertical_padding;
        right: $component-horizontal_padding;
    }

    .Meta {
        @include maxWidth {
            margin-top: 0;
        }
    }
}

.Group-Box.EventList {
    .Item {
        .Options {
            position: initial;

            .OptionsMenu {
                order: 2;
            }
        }
    }
}

.ApplicantList .DataList {
    .PhotoWrap {
        margin-right: 0;
    }

    .ItemContent {
        padding-left: calc(#{$theme-photo_size} + #{$component-horizontal_padding});
    }
}

.DataList-Notes {
    .Item-Col {
        padding-left: 0;
    }

    .Meta {
        margin: 0 0 $utility-baseUnit;
    }

    .NoteType {
        font-size: $component-title_fontSize;
        font-weight: $component-title_fontWeight;
        line-height: #{$theme-photo_size * 0.5};
        color: $component-title_color;
        display: block;
        margin-bottom: $utility-baseUnit;
    }
}

// Mixed Layout
.CategoryBox + .CategoryBox {
    margin-top: $component-base_padding;
}

.CategoryBox {
    .Empty {
        @include listItem;
    }

    .H {
        font-family: $global-heading_fontFamily;
        font-weight: $global-heading_fontWeight;
        font-size: $global-title_fontSize;
        line-height: $global-base_lineHeight;
        margin-bottom: $component-base_padding;
        color: inherit;

        a {
            font-size: inherit;
            font-weight: inherit;
            color: inherit;

            &:focus,
            &:hover {
                color: inherit;
            }
        }

        @include maxWidth {
            font-size: $global-subTitle_fontSize;
        }
    }

    > .OptionsMenu {
        float: right;
        margin-right: $component-base_padding;
    }

    .Bookmark::before,
    .OptionsMenu .Arrow::before {
        font-size: $icon-default_size;
        line-height: $icon-default_size;
    }

    .OptionsMenu .Arrow::before {
        font-size: #{$icon-default_size - 2px};
        margin-top: -1px;
    }
}
